﻿@using Abp.Application.Services.Dto;
@using FwProject.Distribution
@using FwProject.Distribution.Dto
@using X.PagedList
@model Tuple<IPagedList<RestaurantDistributionView>, IPagedList<DistributionTypeNumberReportDto>>
@{
    ViewBag.Title = "餐厅配送统计";
}
@section styles{
    <link href="~/Theme/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="~/Theme/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style type="text/css">
        .input-group[class*=col-] {
            padding: 0 15px;
        }
        /*element.style {
            position: absolute;
            top: 12px;
            right: 35px!important;
            z-index: 4;
            cursor: pointer;
            font-size: 12px;
            display: none;
        }*/
    </style>
}

<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>@ViewBag.Title</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li>
                            <a href="javascript:Print()">打印</a>
                        </li>
                        <li>
                            <a href="javascript:Export()">导出</a>
                        </li>
                    </ul>
                    @*<a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>*@
                </div>
            </div>
            <div class="ibox-content">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#tab-1" aria-expanded="true"><i class="fa fa-file-text-o"></i> 餐厅配送统计</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#tab-2" aria-expanded="false"><i class="glyphicon glyphicon-paste"></i> 配送货品统计</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <div class="row m-b-sm m-t-sm">
                                    <form id="form1" class="form-horizontal" asp-controller="DistributionReport" asp-action="RestaurantDistribution" data-ajax="true" data-ajax-update="#data_list1" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-begin="AjaxBegin" data-ajax-success="AjaxSuccessCallback">
                                        <input type="hidden" name="key" value="1" />
                                        <input type="hidden" id="size1" name="size1" value="0" />
                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                            <label class="control-label col-md-4">餐厅：</label>
                                            <div class="input-group">
                                                <input type="text" name="RestaurantName" id="RestaurantName" placeholder="请输入餐厅名称" class="input-sm form-control">
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                            <label class="control-label col-md-4">司机：</label>
                                            <div class="input-group">
                                                <input type="hidden" name="DriverName" id="DriverId" />
                                                <input type="text" id="dropdown-driverid" class="form-control" onblur="blurEmpty()" placeholder="全部">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" style="line-height:1.455;padding:6px 12px;">
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="z-index: 9999;"></ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-sm-5">
                                            <label class="control-label col-lg-3 col-md-3 col-sm-3">配送日期：</label>
                                            <div class="col-lg-2 col-md-3">
                                                <select id="data_select" class="input-s form-control"></select>
                                            </div>
                                            <div class="input-daterange input-group" id="datepicker">
                                                <input type="text" name="beginTime" id="beginTime" placeholder="起始时间" class="input-sm form-control" autocomplete="off" />
                                                <span class="input-group-addon">至</span>
                                                <input type="text" name="endTime" id="endTime" placeholder="结束时间" class="input-sm form-control" autocomplete="off" />
                                            </div>
                                        </div>
                                        <div class="col-lg-1 col-md-1 col-sm-1">
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-sm btn-primary"> 查询</button>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                                <div id="data_list1">
                                </div>
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                <div class="row m-b-sm m-t-sm">
                                    <form id="form2" class="form-horizontal" asp-controller="DistributionReport" asp-action="RestaurantDistribution" data-ajax="true" data-ajax-update="#data_list2" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-begin="AjaxBegin" data-ajax-success="AjaxSuccessCallback">
                                        <input type="hidden" name="key" value="2" />
                                        <input type="hidden" id="size2" name="size2" value="0" />
                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                            <label class="control-label col-md-4">餐厅：</label>
                                            <div class="input-group">
                                                <input type="text" name="RestaurantName" id="RestaurantName1" placeholder="请输入餐厅名称" class="input-sm form-control">
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                            <label class="control-label col-md-4">司机：</label>
                                            <div class="input-group">
                                                <input type="hidden" name="DriverName" id="DriverId1" />
                                                <input type="text" id="dropdown-driverid1" class="form-control" onblur="blurEmpty1()" placeholder="全部">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" style="line-height:1.455;padding:6px 12px;">
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="z-index: 9999;"></ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-sm-5">
                                            <label class="control-label col-lg-3 col-md-3 col-sm-3">配送日期：</label>
                                            <div class="col-lg-2 col-md-3">
                                                <select id="data_select2" class="input-s form-control"></select>
                                            </div>
                                            <div class="input-daterange input-group" id="datepicker">
                                                <input type="text" name="beginTime2" id="beginTime2" placeholder="起始时间" class="input-sm form-control" autocomplete="off" />
                                                <span class="input-group-addon">至</span>
                                                <input type="text" name="endTime2" id="endTime2" placeholder="结束时间" class="input-sm form-control" autocomplete="off" />
                                            </div>
                                        </div>
                                        <div class="col-lg-1 col-md-1 col-sm-1">
                                            <span class="input-group-btn">
                                                <button type="submit" class="btn btn-sm btn-primary"> 查询</button>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                                <div id="data_list2">
                                    @*@{Html.RenderPartial("TypeNumberDistributionPartial", Model.Item2);}*@
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
@*<div id="modal_ajax" class="modal inmodal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    </div>*@
@section scripts{
    <script src="~/Theme/js/content.min.js?v=1.0.0"></script>
    <script src="~/Theme/js/plugins/iCheck/icheck.min.js"></script>
    <script src="~/Theme/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="~/Theme/js/plugins/suggest/bootstrap-suggest2014.js"></script>
    <script src="~/js/DateComm.js"></script>
    <script src="~/js/DateCommon.js"></script>
    <script src="~/js/PrintUtil.js"></script>
    <script type="text/javascript">

        function Print() {
            var id = $(".tab-pane.active").attr("id");
            var tableid = "table_print";
            var title = "餐厅配送统计";
            if (id == "tab-2") {
                tableid = "table_print2";
                title = "配送货品统计"; 
            }

            printGirdObj({
                //containerId: 'table_print',//包含表格容器のID
                //title: '餐厅配送统计',
                containerId: tableid,
                title: title,
                showRowNum: false,  //表格中rownumbers: true时为true
                showOrder: false,//是否显示序号，rownumbers: true时有效，默认false
                printInit: { //打印初始化设置参数
                    portrait: false //true纵向,false横向
                }
            });
        }

        function Export() {
            var id = $(".tab-pane.active").attr("id");
            if (id == "tab-1") {
                var RestaurantName = $('#RestaurantName').val();
                var DriverName = $('#DriverId').val();
                var beginTime = $('#beginTime').val();
                var endTime = $('#endTime').val();
                window.location.href = "/DistributionReport/ExportRestaurantDistribution?RestaurantName=" + RestaurantName + "&&DriverName=" + DriverName + "&&beginTime=" + beginTime + "&&endTime=" + endTime;
            } else { 
                var RestaurantName = $('#RestaurantName1').val();
                var DriverName = $('#DriverId1').val();
                var beginTime = $('#beginTime2').val();
                var endTime = $('#endTime2').val();
                window.location.href = "/DistributionReport/ExportTypeNumberDistribution?RestaurantName=" + RestaurantName + "&&DriverName=" + DriverName + "&&beginTime=" + beginTime + "&&endTime=" + endTime;
            }
        }

        $(document).ready(function () {
           

            $('#modal_ajax').on('show.bs.modal', function (e) {
                $(this).addClass('loading');
                var $button = $(e.relatedTarget);
                var url = $button.data('url');
                if (!!url) {
                    url = url + ((url.indexOf("?") > -1) ? "&r=" : "?r=") + Math.random();
                    $(this).load(url, function () {
                        $.validator.unobtrusive.parse(this); //$("#form_model_create").validate();
                        $("input[name='Member.Birthday']").datepicker({ todayBtn: "linked", keyboardNavigation: !1, forceParse: !1, calendarWeeks: !0, autoclose: !0 });
                        $(".i-checks").iCheck({ checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green", });
                        $(this).removeClass('loading');
                    });
                }
            });
            $.getJSON("/Users/GetSuggestData?type=司机类型").done(function (data) {
                CommonAjaxCallback(data, function () {
                    bindSuggest(data.result);
                }, null);
            }).fail(function () {
                layer.msg('连接超时，获取司机信息失败！', {
                    icon: 2,
                    time: 2000
                });
            });
            $.getJSON("/Users/GetSuggestData?type=司机类型").done(function (data) {
                CommonAjaxCallback(data, function () {
                    bindSuggest1(data.result);
                }, null);
            }).fail(function () {
                layer.msg('连接超时，获取司机信息失败！', {
                    icon: 2,
                    time: 2000
                });
            });
            //开始时间
            $('#beginTime').datepicker({
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true

            }).on('changeDate', function (e) {
                var startTime = e.date;
                $('#endTime').datepicker('setStartDate', startTime);
            });
            //结束时间：
            $('#endTime').datepicker({
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true

            }).on('changeDate', function (e) {
                var endTime = e.date;
                $('#beginTime').datepicker('setEndDate', endTime);
            });

            //开始时间
            $('#beginTime2').datepicker({
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true

            }).on('changeDate', function (e) {
                var startTime = e.date;
                $('#endTime2').datepicker('setStartDate', startTime);
            });
            //结束时间：
            $('#endTime2').datepicker({
                todayBtn: "linked",
                autoclose: true,
                todayHighlight: true

            }).on('changeDate', function (e) {
                var endTime = e.date;
                $('#beginTime2').datepicker('setEndDate', endTime);
            });
            //加载数据
            $('#form1').submit();
            $('#form2').submit();

            //$('#dropdown-driverid1').siblings('.clearable').style.right = "35px";
        });
        function bindSuggest(data) {
            if ($("#dropdown-driverid") != undefined) {
                $role = $("#dropdown-driverid").bsSuggest({
                    effectiveFields: ["name"],
                    effectiveFieldsAlias: { "name": "姓名" },
                    searchFields: ["name"],
                    clearable: true,
                    getDataMethod: "data",
                    //url: "/Users/GetSuggestData?type=司机类型&keyword=",
                    data: { value: data },
                    idField: "id",
                    keyField: "name",
                    callfun: function () {
                        $("#DriverId").val("");
                    }
                }).on('onDataRequestSuccess', function (e, result) {
                    console.log('onDataRequestSuccess: ', result);
                }).on('onSetSelectValue', function (e, keyword, data) {
                    $("#DriverId").val(data.id);
                    console.log('onSetSelectValue: ', keyword, data);
                }).on('onUnsetSelectValue', function () {
                    console.log('onUnsetSelectValue');
                });
            }
        }
        function blurEmpty() {
            var cityObj = $("#dropdown-driverid");
            var DriverId = $("#DriverId");
            if (cityObj.val() == "") {
                DriverId.attr("value", "");
            }
        }
        function bindSuggest1(data) {
            if ($("#dropdown-driverid1") != undefined) {
                $role = $("#dropdown-driverid1").bsSuggest({
                    effectiveFields: ["name"],
                    effectiveFieldsAlias: { "name": "姓名" },
                    searchFields: ["name"],
                    clearable: true,
                    getDataMethod: "data",
                    //url: "/Users/GetSuggestData?type=司机类型&keyword=",
                    data: { value: data },
                    idField: "id",
                    keyField: "name",
                    callfun: function () {
                        $("#DriverId1").val("");
                    }
                }).on('onDataRequestSuccess', function (e, result) {
                    console.log('onDataRequestSuccess: ', result);
                }).on('onSetSelectValue', function (e, keyword, data) {
                    $("#DriverId1").val(data.id);
                    console.log('onSetSelectValue: ', keyword, data);
                }).on('onUnsetSelectValue', function () {
                    console.log('onUnsetSelectValue');
                });
            }
        }
        function blurEmpty1() {
            var cityObj = $("#dropdown-driverid1");
            var DriverId = $("#DriverId1");
            if (cityObj.val() == "") {
                DriverId.attr("value", "");
            }
        }
        new DateContUtil({//【下拉日期】
            selectId: "data_select",//下拉框のID
            startDate: 'beginTime',//开始日期(不填默认search_startDateBase)
            endDate: 'endTime',//结束日期(不填默认search_endDateBase)
            defaultValue: '4',//本月
            selectedFun: function () {//选中后触发の方法
                $("#form1").submit();
            }
        });
        new DateContUtil2({//【下拉日期】
            selectId: "data_select2",//下拉框のID
            startDate: 'beginTime2',//开始日期(不填默认search_startDateBase)
            endDate: 'endTime2',//结束日期(不填默认search_endDateBase)
            defaultValue: '4',//本月
            selectedFun: function () {//选中后触发の方法
                $("#form2").submit();
            }
        });

        $("#data_list1").on("change", "#pageSize1", function () {
            var size = $("option:selected", this).val();
            $("#size1").val(size);
            var pageurl = $("#pageurl").val();
            $("#form1").submit();
        });
        $("#data_list2").on("change", "#pageSize2", function () {
            var size = $("option:selected", this).val();
            $("#size2").val(size);
            var pageurl = $("#pageurl").val();
            $("#form2").submit();
        });
    </script>
}


